<template>
  <div class="boss_user">
    <el-form class="boss-form" inline ref="form" @submit.prevent @keypress.enter="onSearchClick">
      <el-form-item label="操作账号：">
        <el-select v-model="logData.search.userName" placeholder="请选择模块名称" size="large" style="width: 200px">
          <el-option v-for="item in logData.userList" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作模块">
        <el-select v-model="logData.search.opType" placeholder="请选择模块名称" size="large" style="width: 200px">
          <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间">
        <!--        <el-date-picker v-model="logData.pickerTime"-->
        <!--                        type="datetimerange" start-placeholder="开始时间"-->
        <!--                        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"-->
        <!--                        date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />-->
        <el-date-picker class="date_input" v-model="logData.pickerTime" type="daterange" format="YYYY/MM/DD" clearable
                        value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <Button label="搜索" type="primary" @click="onSearchClick" />
        <Button label="重置" @click="onRestClick" />
      </el-form-item>
    </el-form>
    <div class="outerTable" v-loading="loading">
      <el-table ref="tableRef" :data="logData.list" :height="tableHeight">
        <el-table-column fixed="left" type="index" label="#" width="50" />
        <el-table-column prop="userName" label="操作账号" />
        <el-table-column prop="opType" label="操作模块" />
        <el-table-column prop="opName" label="操作接口" />
        <el-table-column prop="ip" label="IP" />
        <el-table-column prop="warehouseAccount" label="操作时间">
          <template #default="{row}">
            {{ row.createTime }}
          </template>
        </el-table-column>
        <el-table-column prop="args" label="操作内容">
          <template #default="{row}">
            <el-tooltip placement="left" effect="light">
              <template #content>
                <div class="tooltipStyle">
                  <span class="tooltipTitle">{{ row.args }}</span>
                </div>
              </template>
              <el-tag style="margin: 5px">
                查看更多
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="opResult" label="操作结果">
          <template #default="{row}">
            {{ row.opResult?.message }}
          </template>
        </el-table-column>
      </el-table>

      <Pager :page="logData.search.page" :pageSizes="logData.pageSizes" :total="logData.total"
             :limit="logData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/utils/consts'
import { calcTableHeight } from '@/utils/table'
import Pager from '@/components/pager/index.vue'
import Button from '@/components/button/button.vue'

const { tableRef, tableHeight } = calcTableHeight()
const loading = ref(false)
const options = [
  {
    value: '员工'
  },
  {
    value: '仓库员工'
  },
  {
    value: '商品'
  },
  {
    value: '货品'
  },
  {
    value: '出库'
  }
]
const logData = reactive({
  total: 0,
  list: [],
  pickerTime: '',
  userList: [],
  pageSizes: consts.PageSize,
  search: {
    page: 1,
    limit: consts.Limit,
    userName: '',
    opType: '',
    createTimeBegin: '',
    createTimeEnd: ''
  }
})

const onSearchClick = () => {
  logData.search.page = 1
  loadData()
}

const onRestClick = () => {
  logData.pickerTime = ''
  logData.search.userName = ''
  logData.search.opType = ''
  logData.search.createTimeBegin = ''
  logData.search.createTimeEnd = ''
  loadData()
}

const onSizeChange = (val) => {
  logData.search.limit = val
  loadData()
}

const onCurrentChange = (val) => {
  logData.search.page = val
  loadData()
}

const loadData = async () => {
  if (logData.pickerTime) {
    logData.search.createTimeBegin = logData.pickerTime[0]
    logData.search.createTimeEnd = logData.pickerTime[1]
  }
  loading.value = true
  let { data, err } = await api.get('/ruikeli/antiFake/log/list', logData.search)
  let userList = await api.get('/ruikeli/antiFake/log/userList')
  logData.userList = userList.data
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    data.list.forEach((item) => {
      if (item.opResult) {
        item.opResult = JSON.parse(item.opResult)
      }
    })
    logData.list = data.list
    console.log('logData.list', logData.list)
    logData.total = data.count
  }
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.tooltipStyle {
  width: 498px;
  padding: 5px;

  .tooltipTitle {
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    font-weight: 500;
  }
}
</style>
